<template>
    <div>
        <div class="section">
            <div class="location">
                <span>当前位置：</span>
                <a href="/index.html">首页</a> &gt;
                <a href="/goods.html">购物商城</a> &gt;
                <a href="/goods/42/1.html">商品详情</a>
            </div>
        </div>
        <div v-if='goods.goodsinfo' class="section">
            <div class="wrapper clearfix">
                <div class="wrap-box">
                    <div class="left-925">
                        <div class="goods-box clearfix">
                            <div class="pic-box">
                                <div class="magnifier" id="magnifier1">
                                    <div class="magnifier-container">
                                        <div class="images-cover"></div>
                                        <!--当前图片显示容器-->
                                        <div class="move-view"></div>
                                        <!--跟随鼠标移动的盒子-->
                                    </div>
                                    <div class="magnifier-assembly">
                                        <div class="magnifier-btn">
                                            <span class="magnifier-btn-left">&lt;</span>
                                            <span class="magnifier-btn-right">&gt;</span>
                                        </div>
                                        <!--按钮组-->
                                        <div class="magnifier-line">
                                            <ul class="clearfix animation03">
                                                <li v-for='item in goods.imglist' :key='item.id'>
                                                    <div class="small-img">
                                                        <img :src="item.original_path" />
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <!--缩略图-->
                                    </div>
                                    <div class="magnifier-view"></div>
                                    <!--经过放大的图片显示容器-->
                                </div>
                            </div>
                            <div class="goods-spec">
                                <h1>{{goods.goodsinfo.title}}</h1>
                                <p class="subtitle">{{goods.goodsinfo.sub_title}}</p>
                                <div class="spec-box">
                                    <dl>
                                        <dt>货号</dt>
                                        <dd id="commodityGoodsNo">{{goods.goodsinfo.goods_no}}</dd>
                                    </dl>
                                    <dl>
                                        <dt>市场价</dt>
                                        <dd>
                                            <s id="commodityMarketPrice">¥{{goods.goodsinfo.market_price}}</s>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt>销售价</dt>
                                        <dd>
                                            <em id="commoditySellPrice" class="price">¥{{goods.goodsinfo.sell_price}}</em>
                                        </dd>
                                    </dl>
                                </div>
                                <div class="spec-box">
                                    <dl>
                                        <dt>购买数量</dt>
                                        <dd>
                                            <div class="stock-box">
                                                <el-input-number v-model="num1" :min="1" :max="goods.goodsinfo.stock_quantity" label="描述文字"></el-input-number>
                                            </div>
                                            <span class="stock-txt">
                                                库存
                                                <em id="commodityStockNum">{{goods.goodsinfo.stock_quantity}}</em>件
                                            </span>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dd>
                                            <div id="buyButton" class="btn-buy">
                                                <button onclick="cartAdd(this,'/',1,'/shopping.html');" class="buy">立即购买</button>
                                                <button ref='addToShopCartRef' @click="addToShopCar" class="add">加入购物车</button>
                                            </div>
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                        <div id="goodsTabs" class="goods-tab bg-wrap">
                            <Affix>
                            <div id="tabHead" class="tab-head" style="position: static; top: 517px; width: 925px;">
                                <ul>
                                    <li @click ='isShowComment=false'>
                                        <a href="javascript:;" :class="!isShowComment?'selected':''">商品介绍</a>
                                    </li>
                                    <li @click ='isShowComment=true'>
                                        <a href="javascript:;" :class="isShowComment?'selected':''" >商品评论</a>
                                    </li>
                                </ul>
                            </div>
                            </Affix>
                            <div v-if='!isShowComment' class="tab-content entry" style="display: block;">
                                <div class="goodsIntrodution" v-html="goods.goodsinfo.content"></div>
                                
                            </div>
                            <div v-if='isShowComment' class="tab-content" style="display: block;">
                                <div class="comment-box">
                                    <div id="commentForm" name="commentForm"
                                        class="form-box">
                                        <div class="avatar-box">
                                            <i class="iconfont icon-user-full"></i>
                                        </div>
                                        <div class="conn-box">
                                            <div class="editor">
                                                <textarea ref='commentTextRef' id="txtContent" name="txtContent" sucmsg=" " datatype="*10-1000" nullmsg="请填写评论内容！"></textarea>
                                                <span class="Validform_checktip"></span>
                                            </div>
                                            <div class="subcon">
                                                <input id="btnSubmit" @click='postComment' name="submit" type="submit" value="提交评论" class="submit">
                                                <span class="Validform_checktip"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <ul id="commentList" class="list-box">
                                        <p v-if='commentInfo.totalcount<=0' style="margin: 5px 0px 15px 69px; line-height: 42px; text-align: center; border: 1px solid rgb(247, 247, 247);">暂无评论，快来抢沙发吧！</p>
                                        <li v-for='item in commentInfo.message' :key="item.id">
                                            <div class="avatar-box">
                                                <i class="iconfont icon-user-full"></i>
                                            </div>
                                            <div class="inner-box">
                                                <div class="info">
                                                    <span>{{item.user_name}}</span>
                                                    <span>{{item.add_time | dataFmt('YYYY-MM-DD HH:mm:ss')}}</span>
                                                </div>
                                                <p>{{item.content}}</p>
                                            </div>
                                        </li>
                                    </ul>
                                    <div class="page-box" style="margin: 5px 0px 0px 62px;">
                                        <el-pagination
                                            @size-change="handleSizeChange"
                                            @current-change="handleCurrentChange"
                                            :current-page="pageIndex"
                                            :page-sizes="[2, 5, 10, 20]"
                                            :page-size="pageSize"
                                            layout="total, sizes, prev, pager, next, jumper"
                                            :total="commentInfo.totalcount">
                                        </el-pagination>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="left-220">
                        <div class="bg-wrap nobg">
                            <div class="sidebar-box">
                                <h4>推荐商品</h4>
                                <ul class="side-img-list">
                                    <li v-for='item in goods.hotgoodslist' :key='item.id'>
                                        <div class="img-box">
                                            <router-link :to="`/site/goodsinfo/`+item.id" class="">
                                                <img :src="item.img_url">
                                            </router-link>
                                        </div>
                                        <div class="txt-box">
                                            <router-link :to="`/site/goodsinfo/`+item.id" class="">{{item.title}}</router-link>
                                            <span>{{item.add_time | dataFmt }}</span>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <transition v-on:before-enter="beforeEnter"
                    v-on:enter="enter"
                    v-on:after-enter="afterEnter">
            <div v-show='isShowAnimate' ref ='animateRef' v-if="goods.imglist" class="animateImg">
                <img :src="goods.imglist[0].thumb_path" alt="">
            </div>       
        </transition>
    </div>

</template>

<style>
    @import '../../statics/site/js/jqplugins/jqimgzoom/css/magnifier.css';
    .goodsIntrodution {
        padding: 5px;
    }
    .animateImg {
        transition: all 0.5s;
        width: 50px;
        height: 50px;
        position: absolute;
        top:0px;
        left:0px;
    }
    .animateImg img {
        
        width:100%;
        height:100%;
    }
</style>


<script>
    import '../..//statics/site/js/jqplugins/jqimgzoom/js/magnifier.js';

    import { Affix  } from 'iview';
    export default {
        data() {
            return {
                goods: {},
                num1: 1,
                isShowComment:true,
                commentInfo:'',
                pageIndex:1,
                pageSize:2,
                commenttxt:'',
                addToShopCartOffste:null,
                isShowAnimate:false,
                shoppingCartOffset:null,
            };
        },
        components: {
            Affix
        },
        created() {
            this.getGoodsInfo();
            this.getCommentInfo();
            // console.log(this);
        },
        updated(){
            $('#magnifier1').imgzoon({magnifier:'#magnifier1'});
        },
        watch:{
            $route: function (newQuestion, oldQuestion) {
            this.getGoodsInfo();
            // console.log(this.$route);
    }
        },
        methods: {
            getGoodsInfo() {
                const url = `site/goods/getgoodsinfo/${this.$route.params.goodid} `;
                // console.log(this);
                this.$axios.get(url).then(response => {
                    this.goods = response.data.message;

                    setTimeout(()=>{
                        this.addToShopCartOffste = $(this.$refs.addToShopCartRef).offset();
                        
                        $(this.$refs.animateRef).css({
                            left:this.addToShopCartOffste.left,
                            top:this.addToShopCartOffste.top
                        })

                        
                    },200)

                    this.shoppingCartOffset = $('#shoppingCartCount').offset();
                });
            },
            getCommentInfo(){
                const url =`site/comment/getbypage/goods/${this.$route.params.goodid}?pageIndex=${this.pageIndex}&pageSize=${this.pageSize}`;
                this.$axios.get(url).then(response=>{
                    this.commentInfo = response.data;
                })

            },
            handleSizeChange(pageSize){
                this.pageIndex=1;
                this.pageSize = pageSize;
                this.getCommentInfo();
            },
            handleCurrentChange(pageIndex){
                this.pageIndex = pageIndex;
                this.getCommentInfo();
            },
            addToShopCar(){
                this.isShowAnimate=true;

                const goods = {
                    id:this.$route.params.goodid,
                    quantity:this.num1
                }

                this.$store.commit('addGoods',goods);
            },
            postComment(){

                const commenttxt = this.$refs.commentTextRef.value;
                if(commenttxt.trim().length==0){
                    this.$message({
                        message: '请输入评论内容',
                        type: 'warning'
                    });
                    return ;
                }
                const url= `site/validate/comment/post/goods/${this.$route.params.goodid}`;
                this.$axios.post(url,{commenttxt:commenttxt}).then(response=>{
                    // console.log(response.data);
                    if(response.data.status!=0){
                        
                        this.$message.error('评论失败');     
                    }
                    this.$refs.commentTextRef.value='';
                    this.$message({
                        message: '评论成功',
                        type: 'success'
                    });
                    this.getCommentInfo();
                })
            },
             beforeEnter: function (el) {
                
                el.style.left = this.addToShopCartOffste.left+'px';
                el.style.top = this.addToShopCartOffste.top+'px';
                el.style.transform='scale(1)';
            },
            enter: function (el, done) {
                el.offsetWidth;

                el.style.transform='scale(0.5)';
                el.style.left = this.shoppingCartOffset.left+'px';
                el.style.top = this.shoppingCartOffset.top+'px';
                
                
                done()
            },
            afterEnter: function (el) {
                this.isShowAnimate=false;
            },
        }
    };
</script>
